<template>
  <div class="app-container">
    <div class="tabDiv">
      <el-tabs v-model="tabIndex" @tab-click="changeTab">
        <el-tab-pane :label="val.label" :name="val.value" v-for="val in dict.type.ims_date_type"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="top">
      <div class="totalDiv">
        <div class="total">
          <i class="el-icon-truck" style="font-size: 60px;color: #0275a1"></i>
          <div>
            <div class="totalLabel">发货单数(个)</div>
            <div><span class="totalNum">{{ totalForm.sendCount || 0 }}</span></div>
          </div>
        </div>
      </div>
      <div class="totalDiv">
        <div class="total">
          <i class="el-icon-goods" style="font-size: 60px;color: #0275a1"></i>
          <div>
            <div class="totalLabel">下单数量(个)</div>
            <div><span class="totalNum">{{ totalForm.productCount || 0 }}</span></div>
          </div>
        </div>
      </div>
      <div class="totalDiv">
        <div class="total">
          <i class="el-icon-location-outline" style="font-size: 60px;color: #0275a1"></i>
          <div>
            <div class="totalLabel">生产数量(个)</div>
            <div><span class="totalNum">{{ totalForm.produceCount || 0 }}</span></div>
          </div>
        </div>
      </div>
      <div class="totalDiv">
        <div class="total">
          <i class="el-icon-data-line" style="font-size: 60px;color: #0275a1"></i>
          <div>
            <div class="totalLabel">销售额元)</div>
            <div><span class="totalNum">{{ totalForm.totalPrice || 0 }}</span></div>
          </div>
        </div>
      </div>
      <div class="totalDiv">
        <div class="total">
          <i class="el-icon-refrigerator" style="font-size: 60px;color: #0275a1"></i>
          <div>
            <div class="totalLabel">总库存(个)</div>
            <div><span class="totalNum">{{ totalForm.inventoryCount || 0 }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="unit" style="flex: 1;">
        <div class="title">客户下单趋势图</div>
        <div class="chartsDiv" id="charts1"></div>
      </div>
      <div class="unit" style="flex: 1;">
        <div class="title">商品销售趋势图</div>
        <div class="chartsDiv" id="charts2"></div>
      </div>
      <div class="unit" style="flex: 1;">
        <div class="title">平台销售分布图</div>
        <div class="chartsDiv" id="charts3"></div>
      </div>
    </div>
    <div class="bottom">
      <div class="unit" style="position: relative">
        <div class="title">销售Top5分布图</div>
        <div class="chartsDiv" id="charts4"></div>
      </div>
      <div class="unit">
        <div class="title">商品生产趋势图</div>
        <div class="chartsDiv" id="charts5"></div>
      </div>
      <div class="unit">
        <div class="title">买家Top5分布图</div>
        <div class="chartsDiv" id="charts6"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  getOrderData,
  getProductData,
  getTotalNum,
  getPlatData,
  getTypeData,
  getProduceData,
  getCustomerData
} from "@/api/homeMng";

export default {
  dicts: ['ims_date_type'],
  data() {
    return {
      show: false,
      tabIndex: '2',
      totalForm: {},
      form: {
        dateType: '2'
      }
    }
  },
  mounted() {
    this.load()
    getTotalNum(this.form).then(res => {
      this.totalForm = res.data
    })
  },
  methods: {
    changeTab() {
      this.form.dateType = this.tabIndex
      this.load()
    },
    load() {
      let charts1 = echarts.init(document.getElementById('charts1'))
      let charts2 = echarts.init(document.getElementById('charts2'))
      let charts3 = echarts.init(document.getElementById('charts3'))
      let charts4 = echarts.init(document.getElementById('charts4'))
      let charts5 = echarts.init(document.getElementById('charts5'))
      let charts6 = echarts.init(document.getElementById('charts6'))
      charts1.showLoading()
      getOrderData(this.form).then(res => {
        charts1.hideLoading()
        let xData = res.data.xdata
        let yData = res.data.ydataList
        yData.map(val => {
          val.data = val.ydata
          val.type = 'line'
          val.smooth = true
          val.barMaxWidth = 30
        })
        this.getLineCharts(charts1, xData, yData, 80)
      })
      charts2.showLoading()
      getProductData(this.form).then(res => {
        charts2.hideLoading()
        let xData = res.data.xdata
        let yData = res.data.ydataList
        yData.map(val => {
          val.data = val.ydata
          val.type = 'line'
          val.smooth = true
          val.barMaxWidth = 30
        })
        this.getLineCharts(charts2, xData, yData, 80)
      })
      charts3.showLoading()
      getPlatData(this.form).then(res => {
        charts3.hideLoading()
        let data = res.data
        data.map(val => {
          val.name = val.orderFromName
          val.value = val.saleCount
        })
        this.getPieCharts(charts3, data)
      })
      charts4.showLoading()
      getTypeData(this.form).then(res => {
        charts4.hideLoading()
        let xData = res.data.xdata
        let yData = res.data.ydataList
        yData.map(val => {
          val.data = val.ydata
          val.type = 'bar'
          val.barMaxWidth = 30
          val.smooth = true
        })
        this.getLineCharts(charts4, xData, yData, 110)
      })
      charts5.showLoading()
      getProduceData(this.form).then(res => {
        charts5.hideLoading()
        let xData = res.data.xdata
        let yData = res.data.ydataList
        yData.map(val => {
          val.data = val.ydata
          val.type = 'line'
          val.smooth = true
        })
        this.getLineCharts(charts5, xData, yData, 150)
      })
      charts6.showLoading()
      getCustomerData(this.form).then(res => {
        charts5.hideLoading()
        let xData = res.data.xdata
        let yData = res.data.ydataList
        yData.map(val => {
          val.data = val.ydata
          val.type = 'bar'
          val.smooth = true
          val.barMaxWidth = 30
        })
        this.getLineCharts(charts6, xData, yData, 190)
      })
      window.addEventListener('resize', function () {
        charts1.resize()
        charts2.resize()
        charts3.resize()
        charts4.resize()
        charts5.resize()
        charts6.resize()
      })
    },
    getLineCharts(charts, xData, yData, bottom) {
      let option = {
        color: ['#0275a1'],
        xAxis: {
          type: 'category',
          data: xData
        },
        tooltip: {},
        grid: {
          top: 20,
          bottom: bottom,
        },
        yAxis: {
          type: 'value'
        },
        series: yData
      };
      charts.setOption(option)
      charts.hideLoading()
    },
    getPieCharts(charts, data) {
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: data
          }
        ]
      };
      charts.setOption(option)
      charts.hideLoading()
    },
  }
}
</script>

<style scoped>
.app-container {
  padding: 0;
  background: #f1f1f1;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.title {
  margin: 5px 0;
  border-left: 5px solid #0275a1;
  font-size: 15px;
  font-weight: bold;
  padding: 5px;
  border-radius: 5px;
  text-align: left;
  background: linear-gradient(to right, #0275a11f, #0275a10a);
}

.tabDiv {
  background: #fff;
  margin: 0 20px;
  padding: 0 10px;
  border-radius: 10px;
}


.chartsDiv {
  width: 100%;
  height: 100%;
}

.totalNum {
  color: #0275a1;
  font-size: 25px;
  margin-right: 5px;
}

.top {
  display: flex;
}

.totalDiv {
  margin: 0 10px;
}

.center {
  display: flex;
  height: 350px;
}

.bottom {
  display: flex;
  flex: 1;
}

.bottom .unit {
  flex: 1;
}


.totalDiv {
  width: 45%;
  height: 110px;
  border-radius: 10px;
  position: relative;
  background: linear-gradient(to bottom, #0275a187, #B7EEFF00);
}

.total {
  height: 75px;
  display: flex;
  text-align: center;
  justify-content: center;
  line-height: 30px;
  padding: 10px;
}

.unit {
  background: #fff;
  border-radius: 10px;
  margin: 5px;
  padding: 5px;
}

.totalLabel {
  font-size: 16px;
}

</style>
